<template>
    <div>
        <ul class="mui-table-view mui-grid-view">
            <li class="mui-table-view-cell mui-media mui-col-xs-6">
                <a>
                    <img class="mui-media-object" src="/static/imgs/goods/01.jpg">
                    <!-- <div class="mui-media-body">好东西啊</div> -->
                    <div class="desc">
                        <div class="sell">
                            <span>￥80</span>
                            <s>￥9000</s>
                        </div>
                        <div class="detail">
                            <div class="hot">
                                热卖中
                            </div>
                            <div class="count">
                                剩99件
                            </div>
                        </div>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-6">
                <a>
                    <img class="mui-media-object" src="/static/imgs/goods/02.jpg">
                    <!-- <div class="mui-media-body">好东西啊</div> -->
                    <div class="desc">
                        <div class="sell">
                            <span>￥80</span>
                            <s>￥9000</s>
                        </div>
                        <div class="detail">
                            <div class="hot">
                                热卖中
                            </div>
                            <div class="count">
                                剩99件
                            </div>
                        </div>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-6">
                <a>
                    <img class="mui-media-object" src="/static/imgs/goods/03.jpg">
                    <!-- <div class="mui-media-body">好东西啊</div> -->
                    <div class="desc">
                        <div class="sell">
                            <span>￥80</span>
                            <s>￥9000</s>
                        </div>
                        <div class="detail">
                            <div class="hot">
                                热卖中
                            </div>
                            <div class="count">
                                剩99件
                            </div>
                        </div>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-6">
                <a>
                    <img class="mui-media-object" src="/static/imgs/goods/04.jpg">
                    <!-- <div class="mui-media-body">好东西啊</div> -->
                    <div class="desc">
                        <div class="sell">
                            <span>￥80</span>
                            <s>￥9000</s>
                        </div>
                        <div class="detail">
                            <div class="hot">
                                热卖中
                            </div>
                            <div class="count">
                                剩99件
                            </div>
                        </div>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-6">
                <a>
                    <img class="mui-media-object" src="/static/imgs/goods/05.jpg">
                    <!-- <div class="mui-media-body">好东西啊</div> -->
                    <div class="desc">
                        <div class="sell">
                            <span>￥80</span>
                            <s>￥9000</s>
                        </div>
                        <div class="detail">
                            <div class="hot">
                                热卖中
                            </div>
                            <div class="count">
                                剩99件
                            </div>
                        </div>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-6">
                <a>
                    <img class="mui-media-object" src="/static/imgs/goods/06.jpg">
                    <!-- <div class="mui-media-body">好东西啊</div> -->
                    <div class="desc">
                        <div class="sell">
                            <span>￥80</span>
                            <s>￥9000</s>
                        </div>
                        <div class="detail">
                            <div class="hot">
                                热卖中
                            </div>
                            <div class="count">
                                剩99件
                            </div>
                        </div>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-6">
                <a>
                    <img class="mui-media-object" src="/static/imgs/goods/07.jpg">
                    <!-- <div class="mui-media-body">好东西啊</div> -->
                    <div class="desc">
                        <div class="sell">
                            <span>￥80</span>
                            <s>￥9000</s>
                        </div>
                        <div class="detail">
                            <div class="hot">
                                热卖中
                            </div>
                            <div class="count">
                                剩99件
                            </div>
                        </div>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-6">
                <a>
                    <img class="mui-media-object" src="/static/imgs/goods/02.jpg">
                    <!-- <div class="mui-media-body">好东西啊</div> -->
                    <div class="desc">
                        <div class="sell">
                            <span>￥80</span>
                            <s>￥9000</s>
                        </div>
                        <div class="detail">
                            <div class="hot">
                                热卖中
                            </div>
                            <div class="count">
                                剩99件
                            </div>
                        </div>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-6">
                <a>
                    <img class="mui-media-object" src="/static/imgs/goods/01.jpg">
                    <!-- <div class="mui-media-body">好东西啊</div> -->
                    <div class="desc">
                        <div class="sell">
                            <span>￥80</span>
                            <s>￥9000</s>
                        </div>
                        <div class="detail">
                            <div class="hot">
                                热卖中
                            </div>
                            <div class="count">
                                剩99件
                            </div>
                        </div>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-6">
                <a>
                    <img class="mui-media-object" src="/static/imgs/goods/04.jpg">
                    <!-- <div class="mui-media-body">好东西啊</div> -->
                    <div class="desc">
                        <div class="sell">
                            <span>￥80</span>
                            <s>￥9000</s>
                        </div>
                        <div class="detail">
                            <div class="hot">
                                热卖中
                            </div>
                            <div class="count">
                                剩99件
                            </div>
                        </div>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-6">
                <a>
                    <img class="mui-media-object" src="/static/imgs/goods/03.jpg">
                    <!-- <div class="mui-media-body">好东西啊</div> -->
                    <div class="desc">
                        <div class="sell">
                            <span>￥80</span>
                            <s>￥9000</s>
                        </div>
                        <div class="detail">
                            <div class="hot">
                                热卖中
                            </div>
                            <div class="count">
                                剩99件
                            </div>
                        </div>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-6">
                <a>
                    <img class="mui-media-object" src="/static/imgs/goods/06.jpg">
                    <!-- <div class="mui-media-body">好东西啊</div> -->
                    <div class="desc">
                        <div class="sell">
                            <span>￥80</span>
                            <s>￥9000</s>
                        </div>
                        <div class="detail">
                            <div class="hot">
                                热卖中
                            </div>
                            <div class="count">
                                剩99件
                            </div>
                        </div>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-6">
                <a>
                    <img class="mui-media-object" src="/static/imgs/goods/02.jpg">
                    <!-- <div class="mui-media-body">好东西啊</div> -->
                    <div class="desc">
                        <div class="sell">
                            <span>￥80</span>
                            <s>￥9000</s>
                        </div>
                        <div class="detail">
                            <div class="hot">
                                热卖中
                            </div>
                            <div class="count">
                                剩99件
                            </div>
                        </div>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-6">
                <a>
                    <img class="mui-media-object" src="/static/imgs/goods/07.jpg">
                    <!-- <div class="mui-media-body">好东西啊</div> -->
                    <div class="desc">
                        <div class="sell">
                            <span>￥80</span>
                            <s>￥9000</s>
                        </div>
                        <div class="detail">
                            <div class="hot">
                                热卖中
                            </div>
                            <div class="count">
                                剩99件
                            </div>
                        </div>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-6">
                <a>
                    <img class="mui-media-object" src="/static/imgs/goods/06.jpg">
                    <!-- <div class="mui-media-body">好东西啊</div> -->
                    <div class="desc">
                        <div class="sell">
                            <span>￥80</span>
                            <s>￥9000</s>
                        </div>
                        <div class="detail">
                            <div class="hot">
                                热卖中
                            </div>
                            <div class="count">
                                剩99件
                            </div>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</template>
<script>
</script>
<style scoped>
/*scoped作用是css只作用于当前组件，不会影响其他组件样式*/
.mui-table-view.mui-grid-view .mui-table-view-cell > a:not(.mui-btn) {
    margin: 0px;
    padding: 0px;
    border: 1px solid #5c5c5c;
    box-shadow: 0 0 4px #666;
}

.sell > span {
    float: left;
    color: red;
    text-align: left;
}

.detail >.hot {
    float: left;
    text-align: left;
    font-size: 15px;
}

.detail >.count {
    float: right;
    text-align: right;
    font-size: 15px;
}


/*撑开，去除浮动没有的高度*/

.detail {
    overflow: hidden;
}

.desc {
    color: rgba(92, 92, 92, 0.8);
    background-color: rgba(0, 0, 0, 0.2);
}

.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object {
    height: 200px;
}
.mui-table-view.mui-grid-view {
    padding-bottom: 60px;
}
</style>
